<template>
	<view class="home">
		<nav-bar title="灌区运行管理" />

		<view class="home-chart">
			<Weather :weatherInfo="weatherInfo"></Weather>
		</view>

		<van-notice-bar v-if="messageList.length" left-icon="volume-o" :scrollable="false">
			<van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
				<van-swipe-item v-for="(item, index) in messageList" :key="index" @click="goToMessageDetail(item)">
					{{ item.msgType?.label }}
					{{ item.createTimeStr }}
				</van-swipe-item>
			</van-swipe>
		</van-notice-bar>

		<view class="home-serve ">
			<view class="home-serve-title">常用服务</view>
			<van-grid class="home-serve-list" :gutter="10">
				<van-grid-item v-for="serve in serveList" @click="onServe(serve)" :key="serve.title" :icon="serve.image"
					:text="serve.title" />
			</van-grid>
		</view>

		<view v-if="_isAdmin" class="home-serve">
			<view class="home-serve-title">我的待办</view>

			<!-- <view class="flex-between home-serve-list-todo">
				<view class="flex-center" style="color: #F56C6C;">
					<van-icon name="clock-o" size="30rpx" />
					<view class="label">待完成</view>
					<view class="value">{{ total.wait }}</view>
				</view>

				<view class="flex-center">
					<van-icon name="passed" size="30rpx" />
					<view class="label">已完成</view>
					<view class="value">-</view>
				</view>

				<view class="flex-center">
					<van-icon name="points" size="30rpx" />
					<view class="label">总数</view>
					<view class="value">-</view>
				</view>
			</view> -->

			<view class="echart">
				<Chart :data="taskData"></Chart>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		defineAsyncComponent,
		onMounted,
		ref
	} from "vue";

	import dayjs from "dayjs";

	import store from "@/store";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getGdWeather,
		apiTaskTodo,
	} from "@/api/common.js";

	import {
		apiBizMessagePage,
		apiBizMessageMy
	} from "@/api/message";

	import {
		setTabBarBadge
	} from '@/utils/index'

	const Weather = defineAsyncComponent(() =>
		import("@/components/weather/index.vue")
	);
	const Chart = defineAsyncComponent(() =>
		import("./components/Chart")
	);

	const serveList = ref([])
	const adminIconList = [{
			image: "location-o",
			title: "掌上一张图",
			url: "/pages/aPicture/index",
		},
		{
			image: "bar-chart-o",
			title: "用水计量",
			url: "/pages/waterUsed/index",
		},
		{
			image: "bulb-o",
			title: "预警中心",
			url: "/pages/warningHandle/center",
		},
		{
			image: "flag-o",
			title: "巡查巡检",
			url: "/pages/patrolInspect/index",
		},
		{
			image: "description-o",
			title: "需水信息",
			url: "/pages/waterNeed/index",
		},
		{
			image: "edit",
			title: "隐患上报",
			url: "/pages/hiddenTroble/created",
		},
		{
			image: "phone-circle-o",
			title: "需水上报",
			url: "/pages/waterNeed/created",
		},
		{
			image: "records-o",
			title: "发起巡检",
			url: "/pages/patrolInspect/created",
		},
	];
	const userIconList = [{
			image: "phone-circle-o",
			title: "需水上报",
			url: "/pages/waterNeed/created",
		},
		{
			image: "records-o",
			title: "发起巡检",
			url: "/pages/patrolInspect/created",
		},
		{
			image: "edit",
			title: "隐患上报",
			url: "/pages/hiddenTroble/created",
		},
		{
			image: "flag-o",
			title: "巡查巡检",
			url: "/pages/patrolInspect/index",
		},
	];

	const userRoles = computed(() => {
		return store.getters.GET_USER_INFO.roles || []
	});
	const _isAdmin = computed(() => {
		const isAdmin = userRoles.value.includes('5');

		if (isAdmin) {
			serveList.value = adminIconList;
		} else {
			serveList.value = userIconList;
		}

		return isAdmin;
	})

	const getAppInfo = computed(() => store.getters["appStore/getAppInfo"]);
	//气象信息
	const weatherInfo = ref({});
	const getWeatherInfo = async () => {
		try {
			const data = await getGdWeather(getAppInfo.value.adCode);
			weatherInfo.value = data;
		} catch (e) {}
	};

	const messageList = ref([]);
	const getMessageList = () => {
		apiBizMessageMy({
			pageNum: 1,
			pageSize: 10,
		}).then((res) => {
			const data = res.data || [];
			data.forEach((item) => {
				item.createTimeStr = dayjs(item.createTime).format("YYYY-MM-DD HH:mm:ss");
			});
			messageList.value = data;
			// messageList.value = [data[0]];
		});
	};

	const onServe = (serve) => {
		uni.navigateTo({
			url: serve.url,
		});
	};

	const goToMessageDetail = (item) => {
		uni.switchTab({
			url: `/pages/message/index`,
		});
		// uni.setStorageSync('message-detail', item);
		// uni.navigateTo({
		// 	url: `/pages/message/detail?id=${item.msgId}`
		// })
	};

	const taskData = ref([])
	const total = ref({
		wait: 0,
	})
	const getTaskTodo = () => {
		// 0-隐患处理 1-预警处理 2-预警督办 3-日常维修 4-日常养护 5-巡查任务 6-巡查巡检
		const _taskData = [{
			bizType: '0',
			name: '隐患处理',
			value: 0
		}, {
			bizType: '1',
			name: '预警处理',
			value: 0
		}, {
			bizType: '2',
			name: '预警督办',
			value: 0
		}, {
			bizType: '3',
			name: '日常维修',
			value: 0
		}, {
			bizType: '4',
			name: '日常养护',
			value: 0
		}, {
			bizType: '5',
			name: '巡查任务',
			value: 0
		}, {
			bizType: '6',
			name: '巡查巡检',
			value: 0
		}, {
			bizType: '7',
			name: '放水管理',
			value: 0
		}];
		apiTaskTodo().then(res => {
			res.forEach(item => {
				const task = _taskData.find(t => t.bizType === item.bizType);
				if (task) {
					task.value = parseInt(item.count); // 将字符串转换为数字
					task.name = `${task.name}(${task.value})`;
					total.wait += task.value;
				}
			});
			taskData.value = _taskData;
		})
	};
	const pageInit = () => {
		getWeatherInfo();
		getMessageList();
		getTaskTodo();
		setTabBarBadge();
	};

	onMounted(() => {
		pageInit();
	});
</script>

<style lang="scss" scoped>
	.home {
		padding-bottom: 20rpx;

		&-chart {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			height: 300rpx;
		}

		&-serve {
			margin-top: 30rpx;
			padding: 0 30rpx;

			&-title {
				display: flex;
				color: $title1;
				font-weight: 400;
				font-size: 30rpx;
				line-height: 40rpx;

				&-tag {
					margin-left: 10rpx;
					width: 40rpx;
					height: 40rpx;
					background-color: $blue1;
					border-radius: 5rpx;
					line-height: 40rpx;
					text-align: center;
					color: $white;
				}
			}

			&-list {
				margin: 20rpx -20rpx 0 0;
				padding-left: 0 !important;
			}
		}
	}

	.notice-swipe {
		height: 40rpx;
		line-height: 40rpx;
	}

	:deep(.van-grid-item__content) {
		padding-left: 0;
		padding-right: 0;
	}

	.home-serve-list-todo {
		background: #fff;
		margin-top: 20rpx;
		padding: 20rpx 50rpx 0;

		.label {
			padding: 0 5rpx;
		}
	}

	.echart {
		height: 400rpx;
		margin-top: 20rpx;
		background-color: #fff;
	}
</style>